<!DOCTYPE html>
<html>
<head>
    <title>WX BOX</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.2/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.staticfile.org/element-ui/2.4.2/index.js"></script>
    <link rel="stylesheet" href="{:_static()}/css/style.css">
    <script src="{:_static()}/js/mixins.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.0.4/socket.io.js"></script>
    
    <!-- 引入QR库 -->
    <script src="{:_static()}/js/utf.js"></script>
    <script src="{:_static()}/js/jquery.qrcode.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.0.4/socket.io.js"></script>
    
</head>
<body>
<div id="app">
    <div id="qrconde" v-show="qrconde" style="width: 200px;height: 200px;">111</div>
    <p style="color: #f00;line-height: 30px;">{{msg}}</p>
</div>
</body>
</html>
<script>
const socket = io("127.0.0.1:3030");


</script>


<script>
const app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        qrconde:false,
        msg:'',
    },
    created(){
        this.init();

    },
    methods: {
        init(){
            socket.on('connect',_=>{
                socket.on('test',res=>{
                    console.log(res);
                })
                socket.on('scanUrl',url=>{
                    console.log('scanUrl',url);
                    this.showQr(url);
                })
                socket.on('login',res=>{
                    if(res.success){
                        this.qrconde=false;
                    }
                    this.msg=res.msg;
                    console.log('login');
                }) 
                socket.on('message',res=>{
                    console.log('message:',res);
                })         
            });
        },
        showQr(text){
            if(!text)return;
            this.qrconde=true;
            this.$nextTick(_=>{
                $("#qrconde").empty().qrcode({      // 调用qQcode生成二维码
                    render : "canvas",              // 设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
                    text,                    // 扫描了二维码后的内容显示,在这里也可以直接填一个网址或支付链接
                    width : "200",                  // 二维码的宽度
                    height : "200",                 // 二维码的高度
                    background : "#ffffff",         // 二维码的后景色
                    foreground : "#000000",         // 二维码的前景色
                    src: ""                         // 二维码中间的图片
                });
            })
        },
        login(){
            $.get('127.0.0.1:3030',res=>{

            });
        }
    }
});
</script>
